<script setup>
import { ref, reactive, onMounted } from "vue";
import myAxios from "@/plugins/myAxios.js";
import { Toast, Dialog } from "vant";
import UserTagList from "../components/UserTagList.vue";
import {
    recommendPageQueryUser,
    matchdPageQueryUser,
} from "../services/pageQuery/UserPageQuery.js";
import { watchEffect } from "vue";
// 查询到的用户列表，默认为空数组
let userList = ref([]);
// 当前页码，每页页数，总记录数
let pageNum = ref(1);
const pageSize = 4;
let total = ref();
let isMatchMode = ref(false);
// onMounted(async () => {
//     [userList.value, total.value] = await recommendPageQueryUser(
//         pageNum.value,
//         pageSize
//     );
// });
// const pageChange = async () => {
//     [userList.value, total.value] = await recommendPageQueryUser(
//         pageNum.value,
//         pageSize
//     );
// };
const onUpdateValue = (newValue) => {
    Dialog.confirm({
        title: "提示",
        message: "是否切换模式",
    }).then(() => {
        isMatchMode.value = newValue;
        pageNum.value = 1;
    });
};
const loadData = async () => {
    if (isMatchMode.value) {
        [userList.value, total.value] = await matchdPageQueryUser(
            pageNum.value,
            pageSize
        );
    } else {
        [userList.value, total.value] = await recommendPageQueryUser(
            pageNum.value,
            pageSize
        );
    }
};
watchEffect(() => {
    loadData();
});
</script>
<template>
    <div id="userTagList">
        <van-cell center title="心动模式，切换模式匹配伙伴">
            <template #right-icon>
                <van-switch
                    :model-value="isMatchMode"
                    @update:model-value="onUpdateValue"
                >
                    <template #node>
                        <div class="icon-wrapper">
                            <van-icon
                                :name="isMatchMode ? 'success' : 'cross'"
                            />
                        </div>
                    </template>
                </van-switch>
            </template>
        </van-cell>
        <UserTagList :userList="userList"></UserTagList>
        <van-pagination
            @change="pageChange"
            v-if="userList && userList.length >= 1"
            v-model="pageNum"
            :total-items="total"
            :show-page-size="3"
            :items-per-page="pageSize"
            force-ellipses
        />
    </div>
</template>
<style scoped>
#userTagList {
    margin-bottom: 50px;
}
.icon-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 18px;
}

.icon-wrapper .van-icon-success {
    line-height: 32px;
    color: var(--van-blue);
}

.icon-wrapper .van-icon-cross {
    line-height: 32px;
    color: var(--van-gray-5);
}
</style>
